<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ok{
			    color:green;
			}
			.error{
			    color:red;
			}
		</style>
		<script type="text/javascript">
			function checkName() {
				var nanmeInput = document.getElementById("name");
				var nameSpan = document.getElementById("nameMsg");
				var name = nanmeInput.value;
				var reg = /^\w{5,10}$/;
				if (name.match(reg)) {
					nameSpan.className = "ok";
				} else{
					nameSpan.className = "error";
				}
			}
			
			function checkEmail() {
				var emailInput = document.getElementById("email");
				var emailSpan = document.getElementById("emailMsg");
				var email = emailInput.value;
				var reg = /[a-zA-Z0-9_-]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+/;
				if (email.match(reg)) {
					emailSpan.className = "ok";
				} else{
					emailSpan.className = "error";
				}
			}
		</script>
	</head>
	<body>
		名字:<input  type="text" id="name" onblur="checkName()"/>
		<span id="nameMsg">5-10位的字母、数字、下划线</span>
		<br/>
		邮箱:<input  type="text" id="email" onblur="checkEmail()"/>
		<span class="ok" id="emailMsg">必须符合邮箱的格式</span>
	</body>
</html>
